.stufenakkorde{
  display:grid;
  grid-template-columns: repeat(25, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 900px;
  height: 130px;
  gap:1px;
  border: 1px solid rgb(78, 2, 2);
}

.oktave1 {
  grid-column: span 12;
  text-align:center;
  border:1px solid brown;
}

.oktave2 {
  grid-column: span 13;
  text-align:center;
  border:1px solid brown;
}

.intervalle {
 text-align:center;
 border:1px solid brown;
}



.harmonischMoll {                           /*Hauptgrid für Harmonisch Moll*/
 display:grid;
 grid-template-columns: repeat(15, 1fr);
 grid-template-rows: repeat(8, 1fr);
 width:  700px;
 height: 500px;
}
                                               /* Wrapper für Harmonisch Moll*/

  .wrapperHmSpalte1 {                                     /*Wrapper für die erste Zeile -  erste Spalte */
    display: grid;    
    grid-template-columns:repeat(8, 1fr);           /* 8 gleich breite Boxen im Wrapper */
    grid-column: 2 / span 8;                        /* nimmt Spalte 2 und 8 ein */
    border: 1px solid brown;                        /* Rahmen um beide Boxen */
    background: rgb(253, 239, 213);
  }

.wrapperHmSpalte2 {                                /*Wrapper für die erste Zeile - zweite Spalte*/
    display: grid;    
    grid-template-columns:repeat(6, 1fr);           /* 8 gleich breite Boxen im Wrapper */
    grid-column: 10 / span 16;                        /* nimmt Spalte 2 und 8 ein */
    border: 1px solid brown;                        /* Rahmen um beide Boxen */
    background: rgb(253, 239, 213);
  }


.bezeichnung1 {
 text-align:center;
border:1px solid brown;

}

.bezeichnung2 {
 grid-column:2/ span 8;
 text-align:center;
border:1px solid brown;

}

.bezeichnung3 {
 grid-column:10/ span 6;
 text-align:center;
border:1px solid brown;

}

.ton {
 display: flex;
 justify-content: center;
 align-items: center;
}

.zeilenNamen{
grid-column-start:1;
  background: #ffa500;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
}